.applayout {
	width: 100%;
	height: 100%;
	&-area {
		display: flex;
		height: 100%;
		// height: var(--content-height);
		.menu {
			width: var(--menu-width);
		}
		.content {
			// width: calc(100% - var(--menu-width));
			width: 100%;
			// padding-left: var(--menu-width);
			background: white;
			flex: 1;
			overflow: auto;
			& > div {
				height: 100%;
			}
			&-width {
				width: 100%;
			}
			#container {
				.layout-area {
					padding-right: 0;
				}
				.menu {
					display: none;
				}
				.content {
					width: 100%;
				}
			}
			&-bg {
				background: initial;
				.content {
					background: initial;
				}
			}
		}
		&-style {
			padding: 0;
		}
	}
	&.app {
		.content {
			background: initial;
		}
	}
	.menu {
		height: 100%;
		position: relative;
		padding: 10px 0;
		flex-shrink: 0;
		// position: fixed;
		// top: 0;
		// bottom: 0;
		.logo {
			width: 120px;
			height: var(--header-height);
			margin: 0 auto;
			display: flex;
			align-items: center;
		}
		.bottom {
			position: absolute;
			bottom: 10px;
			left: 0;
			padding: 0 8px;
			width: 100%;
		}
		.menu-list {
			& > .item {
				padding: 7px 10px;
				cursor: pointer;
				display: flex;
				align-items: center;
				border-radius: 6px;
				margin-bottom: 2px;
				&:hover {
					background: #e6e6e6;
				}
				&-active {
					background: #e6e6e6;
					color: rgb(14, 66, 210);
				}
			}
			.title {
				padding: 20px 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #b3b3b3;
			}
		}
		.app-list {
			.item {
				padding: 10px;
			}
		}
	}
}

.arco-menu-item{
	margin-bottom: 2px !important;
}
